import { PureComponent } from 'react'
import { Modal, Input, DatePicker, Select } from 'antd'
import styles from './couponModal.less'
const { Option } = Select
class CouponModal extends PureComponent {
    handleCancel = () =>{
        const { onCancel } = this.props
        onCancel()
    }
    handleOk = () => {
        const { onOk } = this.props
        onOk()
    }
    render(){
        const { visible } = this.props
        return(
            <Modal
              title="优惠券派发"
              visible={visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
            >
                <div className={styles.couponModalSearch}>
                    <span className={styles.couponModalSpan}>目标客户<span style={{color: 'red'}}>[会员号]</span>：</span>
                    <Input className={styles.couponModalInput}/>
                </div>
                <div className={styles.couponModalSearch}>
                    <span className={styles.couponModalSpan}>生效时间<span style={{color: 'red'}}>00:00:00</span>：</span>
                    <DatePicker className={styles.couponModalInput}/>
                </div>
                <div className={styles.couponModalSearch}>
                    <span className={styles.couponModalSpan}>失效时间<span style={{color: 'red'}}>23:59:59</span>：</span>
                    <DatePicker className={styles.couponModalInput}/>
                </div>
                <div className={styles.couponModalSearch}>
                    <span className={styles.couponModalSpan}>优惠类型：</span>
                    <Select className={styles.couponModalInput}>
                        <Option value="value">value</Option>
                    </Select>
                </div>
                <div className={styles.couponModalSearch}>
                    <span className={styles.couponModalSpan}>支付类型：</span>
                    <Select className={styles.couponModalInput}>
                        <Option value="value">value</Option>
                    </Select>
                </div>
                <div className={styles.couponModalSearch} style={{marginBottom: '10px'}}>
                    <span className={styles.couponModalSpan}>折扣：</span>
                    <Input className={styles.couponModalInput}/>
                </div>
                <p style={{color: 'red',textAlign: 'center'}}>折扣率单位为%;折扣金额预付单位为CNY,到付为USD</p>
            </Modal>
        )
    }
}
export default CouponModal